<template>
  <div class="table-main">
    <el-dialog
      :close-on-click-modal="false"
      @close="handMyClose"
      :append-to-body="true"
      title="商品"
      :visible.sync="dialogVisibleMulti"
      width="60%"
    >
      <div style="margin-top:50px;">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="商品信息录入" name="first">
            <el-form ref="form" :model="form" label-width="120px" :rules="rules">
              <el-row :gutter="20" justify="center" type="flex">
                <el-col :span="16">
                  <el-form-item label="商品类目:" prop="goodTypeId">
                    <el-cascader
                      @change="handData"
                      ref="myCascader"
                      :props="defaultParams"
                      :options="goodClassList"
                      :disabled="isShow == 3"
                      v-model="form.goodTypeId"
                    ></el-cascader>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20" justify="center" type="flex">
                <el-col :span="16">
                  <el-form-item label="商品单位:" prop="goodUnit">
                    <el-select
                      filterable
                      :disabled="isShow == 3"
                      v-model="form.goodUnit"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in companyList"
                        :key="item.id"
                        :label="item.dataValue"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                    <el-button
                      type="primary"
                      v-if="isShow != 3"
                      icon="el-icon-plus"
                      @click="handAddGoodUnit"
                    >添加</el-button>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20" justify="center" type="flex">
                <el-col :span="16">
                  <el-form-item label="商品品牌:" prop="brand">
                    <el-select
                      filterable
                      :disabled="isShow == 3"
                      v-model="form.brand"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in brandList"
                        :key="item.id"
                        :label="item.dataValue"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                    <el-button
                      type="primary"
                      v-if="isShow != 3"
                      icon="el-icon-plus"
                      @click="handAddBrand"
                    >添加</el-button>
                  </el-form-item>
                </el-col>
              </el-row>
              <!-- <el-row :gutter="20" justify="center" type="flex">
                <el-col :span="16">
                  <el-form-item label="商家店铺:" prop="shops">
                    <el-select
                      filterable
                      :disabled="isShow == 3"
                      v-model="form.shops"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in findAllsList"
                        :key="item.id"
                        :label="item.shopName"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>-->
              <el-row :gutter="20" justify="center" type="flex">
                <el-col :span="16">
                  <el-form-item label="商品:" prop="fileList">
                    <el-upload
                      ref="upload"
                      :data="form"
                      :headers="headers"
                      class="avatar-uploader"
                      :action="
                        $store.state.app.newUrl + '/admin/goods/moreGoodFile'
                      "
                      :show-file-list="true"
                      :on-success="handSuccess"
                      :auto-upload="false"
                      :on-change="handlePreview"
                      :file-list="form.fileList"
                    >
                      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                    </el-upload>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleMulti = false">取 消</el-button>
        <el-button
          type="primary"
          @click="handFromSub('form')"
          v-if="isShow != 3"
          :loading="bntLoading"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { imgSizi } from '@/utils/myUtils'
import myTinymce from '@/components/Tinymce'
export default {
  name: 'SidebarLogo',
  components: {
    myTinymce,
  },
  watch: {
    isState(newObj) {
      this.isShow = newObj
    },
  },
  props: {
    isState: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      loadingUploda2: false,
      bntLoading: false,
      headers: {
        token: localStorage.getItem('mytoken') || '',
        // 'content-type': 'multipart/form-data'
      },
      rules: {
        goodTypeId: [
          {
            required: true,
            message: '请选择商品类目',
            trigger: 'change',
          },
        ],
        // brand: [
        //   { required: true, message: '请选择商品品牌', trigger: 'change' }
        // ],
        goodsFlag: [
          { required: true, message: '请选择商品类型', trigger: 'change' },
        ],
        shops: [
          { required: true, message: '请选择商家店铺', trigger: 'change' },
        ],
        goodUnit: [
          { required: true, message: '请选择商品单位', trigger: 'change' },
        ],
        fileList: [
          { required: true, message: '请上传商品', trigger: 'change' },
        ],
      },
      loadingUploda: false,
      defaultParams: {
        label: 'title',
        value: 'id',
        children: 'children',
      },
      form: { goodTypeId: '', fileList: [] },
      shopStatusOptions: [],
      isShow: 0,
      imageUrl: '',
      dialogImageUrl: '',
      dialogVisibleMulti: false,
      addressKeyword: '',
      activeName: 'first',
      dialogVisible: false,
      brandList: [],
      goodClassList: [],
      findAllsList: [],
      loading2: true,
      companyList: [],
    }
  },
  async mounted() {
    this.companyList = (await this.$api.getFindCompany()).data.data
    console.log(this.companyList, '单位')
  },
  methods: {
    handlePreview(file, fileList) {
      console.log(file)
      if (fileList.length != 0)
        this.form.fileList = [fileList[fileList.length - 1]]
    },
    handAddGoodUnit() {
      this.$prompt('请输入单位名称', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^[\s\S]*.*[^\s][\s\S]*$/,
        inputErrorMessage: '请输入单位名称',
      })
        .then(({ value }) => {
          let form = {
            dataValue: value,
            dataType: 'Company',
            pid: this.companyList[0].pid || '',
          }
          this.$api
            .addSysDict(form)
            .then(async (res) => {
              this.form.goodUnit = res.data.data
              this.companyList = (await this.$api.getFindCompany()).data.data
              this.$message({
                message: res.data.message,
                type: 'success',
              })
            })
            .finally(() => {})
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入',
          })
        })
    },
    handAddBrand() {
      this.$prompt('请输入品牌名字', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^[\s\S]*.*[^\s][\s\S]*$/,
        inputErrorMessage: '请输入品牌名称',
      })
        .then(({ value }) => {
          let form = {
            dataValue: value,
            dataType: 'Brand',
            pid: this.brandList[0].pid || '',
          }
          this.$api
            .addSysDict(form)
            .then(async (res) => {
              this.form.brand = res.data.data
              this.brandList = (await this.$api.getSysBrand()).data.data
              this.$message({
                message: res.data.message,
                type: 'success',
              })
            })
            .finally(() => {})
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入',
          })
        })
    },
    handData(val) {
      this.form.goodTypeId = this.form.goodTypeId[
        this.form.goodTypeId.length - 1
      ]
    },
    async handGetList(val, id) {
      this.activeName = 'first'
      this.loading2 = false
      this.brandList = (await this.$api.getSysBrand()).data.data
      this.findAllsList = (await this.$api.userByShop()).data.data
      console.log('商家当店铺', this.findAllsList)
      let newData = (await this.$api.getGoodsTypeTreeinfo()).data.data
      console.log(id, '有吗')
      if (id) {
        this.this.form.shops = id
      }

      newData.forEach((item) => {
        if (item.children.length == 0) {
          item.disabled = true
        }
      })
      this.goodClassList = this.getTreeData(newData)
      console.log(this.goodClassList, 'this.goodClassList')
      if (val == 1) {
      }
    },
    handGetShop(id) {
      this.$forceUpdate()
      this.loading2 = true
      this.$api.getSysSelectGoodsByIdGoods(id).then(async (res) => {
        console.log('详情吗', res.data.data)
        res.data.data.shops = parseInt(res.data.data.shops)
        res.data.data.resourcesList.forEach((item) => {
          item.url = item.resPath
        })
        this.$refs.ceshifuwenben.setContent(res.data.data.details)
        this.form = res.data.data
        this.form.goodTypeId = this.form.goodTypeId + ''
        this.loading2 = false
      })
    },
    onChange() {
      this.loadingUploda2 = false
    },
    handSuccess(res, file) {
      console.log(res, 'zoulema ')
      this.bntLoading = false
      this.$parent.init()
      this.$message({
        message: res.message,
        type: 'success',
      })
      this.dialogVisibleMulti = false
    },
    beforeAvatarUpload(file) {},
    handMyClose() {
      // this.$refs.form.resetFields()
      for (let key in this.form) {
        this.form[key] = ''
      }
      this.form.fileList = []
      this.form.resourcesList = []
    },
    handFromSub(formName) {
      this.form.shops = this.newShopID
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.$refs.upload.submit()
        } else {
          console.log('error submit!!')
          this.$message({
            message: '请完成表单录入',
          })
          return false
        }
      })
    },

    // handSuccess(response, file, fileList) {
    //   console.log(response, file, fileList, '成功回调')
    //   this.form.shopImg = response.message
    // },
    handleClick() {},
    getTreeData(data) {
      // 循环遍历json数据
      for (var i = 0; i < data.length; i++) {
        if (data[i].children.length < 1) {
          data[i].children = undefined
        } else {
          this.getTreeData(data[i].children)
        }
      }

      return data
    },
  },
}
</script>

<style lang="scss" scoped>
.img_item_box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  img {
    margin-right: 8px;
    margin-bottom: 8px;
    border-radius: 6px;
  }
}
.map_btn {
  width: 82px;
  height: 22px;
  background: rgba(56, 173, 147, 1);
  border-radius: 4px;
  color: #fff;
  font-size: 14px;
  line-height: 22px;
  text-align: center;
  margin-top: 8px;
}
/deep/ .el-form-item__label {
  font-size: 14px;
  color: #000;
  font-weight: bold;
}
.form_box {
  width: 80%;
  margin: 0 auto;
}
.avatar-uploader /deep/ .el-upload {
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #38ad93;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
